Netscape günlerinden kalma bir gecikmedir:
Eksik basamaklar 0 [...] olarak kabul edilir. Yanlış bir rakam basitçe 0 olarak yorumlanır. Örneğin, # F0F0F0, F0F0F0, F0F0F, #FxFxFx ve FxFxFx değerlerinin hepsi aynıdır.
Blog gönderisinden alınmıştır.Microsoft Internet Explorer'ın çeşitli renk değerleri uzunlukları da dahil olmak üzere onu ayrıntılı olarak kapsayan renk ayrıştırması hakkında biraz rant.
Kuralları blog gönderisinden sırayla uygularsak, aşağıdakileri elde ederiz:
Geçersiz tüm onaltılık karakterleri 0’larla değiştirin:
chucknorris, c00c0000000 olur
3'e (11 → 12) bölünebilen sonraki toplam karakter sayısına kadar doldurun:
c00c 0000 0000
Her bileşen bir RGB renginin karşılık gelen renk bileşenini temsil edecek şekilde üç eşit gruba bölün:
RGB (c00c, 0000, 0000)
Bağımsız değişkenlerin her birini sağdan iki karaktere kadar kısaltın.
Son olarak şu sonucu verir:
RGB (c0, 00, 00) = # C00000 veya RGB (192, 0, 0)
İşte bu "harika" renk örneğini oluşturmak için bgcolor özelliğini çalışırken gösteren bir örnek:
| ayna norris |
Bay T |
ninjaturtle |
| hasta |
saçmalık |
çimen |
Bu aynı zamanda sorunun diğer kısmını da yanıtlar: Neden bgcolor = "chucknorr" sarı bir renk üretir? Kuralları uygularsak, dize:
c00c00000 => c00 c00 000 => c0 c0 00 [RGB (192, 192, 0)]
Açık sarı altın rengi verir. Dize 9 karakter olarak başladığından, bu sefer ikinci 'C'yi tutuyoruz, dolayısıyla son renk değerinde bitiyor.
Başlangıçta birileri color = "crap" yapabileceğinizi söylediğinde bununla karşılaştım ve kahverengiden çıkıyor.
|
Aynı fikirde olmadığım için üzgünüm, ancak @ Yuhong Bao tarafından yayınlanan eski bir renk değerini ayrıştırma kurallarına göre, chucknorris # CC0000'e eşit DEĞİLDİR, çok benzer ancak biraz farklı bir kırmızı ton olan # C00000'e eşittir. Bunu doğrulamak için Firefox ColorZilla eklentisini kullandım.
Kurallar şu şekildedir:
0s ekleyerek dizeyi 3'ün katı olan bir uzunluk yapın: chucknorris0
diziyi eşit uzunlukta 3 diziye ayırın: chuc knor ris
her dizeyi 2 karakter olacak şekilde kısaltın: ch kn ri
hex değerlerini koruyun ve gerekli yerlerde 0 ekleyin: C0 00 00
Aşağıdaki dizeleri doğru yorumlamak için bu kuralları kullanabildim:
LuckyCharms
Şans
LuckBeALady
LuckBeALadyTonight
GangnamStyle
GÜNCELLEME: Rengin # CC0000 olduğunu söyleyen asıl cevaplayıcılar, düzeltmeyi içerecek şekilde cevaplarını düzenlediler.
|
Çoğu tarayıcı, renk dizenizdeki onaltılık OLMAYAN değerleri göz ardı ederek onaltılık olmayan rakamları sıfırlarla değiştirir.
ChuCknorris, c00c0000000'e çevrilir. Bu noktada tarayıcı, Kırmızı, Yeşil ve Mavi değerlerini göstererek dizeyi üç eşit kısma böler: c00c 0000 0000. Her bölümdeki fazladan bitler yok sayılır ve bu da kırmızımsı bir renk olan # c00000 sonucunu oluşturur.
Bunun, CSS standardına uyan CSS renk ayrıştırması için geçerli olmadığını unutmayın.
Kırmızımsı
Yukarıdaki ile aynı
Siyah
|
Nedeni, tarayıcının onu anlayamaması ve bir şekilde anlayabildiği şeye ve bu durumda onaltılık bir değere çevirmeye çalışmasıdır! ...
chucknorris, onaltılık olarak tanınan c karakteri ile başlar, aynı zamanda tüm tanınmayan karakterleri 0'a dönüştürür!
Böylece onaltılık formatta chucknorris şöyle olur: c00c00000000, diğer tüm karakterler 0 olur ve c oldukları yerde kalır ...
Şimdi RGB (kırmızı, yeşil, mavi) için 3'e bölünüyorlar ... R: c00c, G: 0000, B: 0000 ...
Ancak RGB için geçerli onaltılık yalnızca 2 karakter olduğunu biliyoruz, yani R: c0, G: 00, B: 00
Yani gerçek sonuç şudur:
bgcolor = "# c00000";
Ayrıca görseldeki adımları sizin için hızlı bir referans olarak ekledim:
|
Geçerli bir değer olmadığı için tarayıcı, chucknorris'i onaltılık renk koduna dönüştürmeye çalışıyor.
Chucknorris'de c hariç her şey geçerli bir onaltılık değer değildir.
Böylece c00c00000000'e dönüştürülür.
Bu da # c00000 olur, kırmızı bir gölge.
Hem Chrome (31) hem de Firefox (26) bunu görmezden geldiğinden, bu öncelikle Internet Explorer ve Opera (12) için bir sorun gibi görünüyor.
Not: Parantez içindeki sayılar, üzerinde test ettiğim tarayıcı sürümleridir.
Daha hafif bir notta
Chuck Norris, web standartlarına uymuyor. Web standartlarına uygundur
ona. # BADA55
|
WHATWG HTML spesifikasyonu, eski bir rengi ayrıştırmak için kesin algoritmaya sahiptirdeğer:
https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value.
Renk dizgilerini ayrıştırmak için kullanılan Netscape Classic kodu açık kaynak kodludur:
https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155.
Örneğin, her karakterin bir onaltılık basamak olarak ayrıştırıldığına ve ardından taşma kontrolü yapılmadan 32 bitlik bir tam sayıya kaydırıldığına dikkat edin. 32 bitlik bir tam sayıya yalnızca sekiz onaltılık rakam sığar, bu nedenle yalnızca son 8 karakter dikkate alınır. Onaltılık rakamları 32-bit tam sayılara ayrıştırdıktan sonra, 8-bit'e sığıncaya kadar 16'ya bölerek 8-bitlik tam sayılara kesilirler, bu yüzden baştaki sıfırlar yok sayılır.
Güncelleme: Bu kod, spesifikasyonda tanımlananla tam olarak eşleşmez, ancak tek fark birkaç satır koddur. Sanırım eklenen şu satırlar (Netscape 4'te):
eğer (bytes_per_val> 4)
{
bytes_per_val = 4;
}
|
Cevap:
Tarayıcı, chucknorris'i onaltılık bir değere dönüştürmeye çalışacaktır.
C, chucknorris'deki tek geçerli onaltılık karakter olduğundan, değer şu şekle dönüşür: c00c00000000 (geçersiz olan tüm değerler için 0).
Tarayıcı daha sonra sonucu 3 gruba ayırır: Kırmızı = c00c, Yeşil = 0000, Mavi = 0000.
Html arka planları için geçerli onaltılık değerler her renk türü (r, g, b) için yalnızca 2 basamak içerdiğinden, her gruptan son 2 basamak kesilerek tuğla kırmızımsı tonlu bir renk olan c00000 rgb değeri bırakılır.
|
chucknorris c ile başlar ve tarayıcı bunu onaltılık bir değere okur.
Çünkü A, B, C, D, E ve F onaltılık karakterlerdir.
Tarayıcı, chucknorris'i onaltılık C00C00000000 değerine dönüştürür.
Ardından C00C00000000 onaltılık değer RGB formatına dönüştürülür (3'e bölünür):
C00C00000000 ⇒ R: C00C, G: 0000, B: 0000
Tarayıcının rengi belirtmek için yalnızca iki rakama ihtiyacı vardır:
R: C00C, G: 0000, B: 0000 ⇒ R: C0, G: 00, B: 00 ⇒ C00000
Son olarak, web tarayıcısında bgcolor = C00000 değerini gösterin.
İşte bunu gösteren bir örnek:
| chucknorris |
c00c00000000 |
c00000 |
|
Eski özniteliklerdeki renkleri ayrıştırma kuralları, mevcut yanıtlarda belirtilenlerden daha ek adımlar içerir. Kesik bileşen 2 basamaklı kısım şu şekilde tanımlanır:
Son 8 hariç tüm karakterleri atın
Tüm bileşenlerin başında sıfır olduğu sürece baştaki sıfırları tek tek atın
İlk 2 dışındaki tüm karakterleri atın
Bazı örnekler:
oooFoooFoooF
000F 000F 000F <- değiştir, tampon ve yığın
0F 0F 0F <- baştaki sıfırlar kesildi
0F 0F 0F <- sağdan 2 karaktere kesildi
oooFooFFoFFF
000F 00FF 0FFF <- değiştir, tampon ve yığın
00F 0FF FFF <- baştaki sıfırlar kesildi
00 0F FF <- sağdan 2 karaktere kesildi
ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- değiştirme, tamponlama ve yığın
BC000000 BC000000 BC000000 <- soldan 8 karaktere kesildi
BC BC BC <- sağdan 2 karaktere kısaltıldı
AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- değiştir, tampon ve yığın
0C000000 0C000000 0C000000 <- soldan 8 karaktere kesildi
C000000 C000000 C000000 <- baştaki sıfırlar kesilmiş
C0 C0 C0 <- sağdan 2 karaktere kesildi
Aşağıda, algoritmanın kısmi bir uygulaması bulunmaktadır. Kullanıcının geçerli bir renk girdiği hataları veya durumları işlemez.
function parseColor (input) {
// yapılacaklar listesi: girdi "" ise hata döndür
input = input.trim ();
// yapılacaklar listesi: girdi "şeffaf" ise hata döndür
// todo: girdi adlandırılmış bir renkse karşılık gelen #rrggbb döndür
// yapılacaklar listesi: girdi #rgb ile eşleşirse #rrggbb döndür
// yapılacaklar listesi: U + FFFF'den büyük unicode kod noktalarını 00 ile değiştirin
eğer (input.length> 128) {
input = input.slice (0, 128);
}
eğer (input.charAt (0) === "#") {
input = input.slice (1);
}
input = input.replace (/ [^ 0-9A-Fa-f] / g, "0");
while (input.length === 0 || input.length% 3> 0) {
giriş + = "0";
}
var r = input.slice (0, input.length / 3);
var g = input.slice (input.length / 3, input.length * 2/3);
var b = input.slice (input.length * 2/3);
eğer (r.length> 8) {
r = r.slice (-8);
g = g.slice (-8);
b = b. dilim (-8);
}
while (r.length> 2 && r.charAt (0) === "0" && g.charAt (0) === "0" && b.charAt (0) === "0") {
r = r.slice (1);
g = g.slice (1);
b = b. dilim (1);
}
eğer (r.length> 2) {
r = r.slice (0, 2);
g = g.slice (0, 2);
b = b. dilim (0, 2);
}
return "#" + r.padStart (2, "0") + g.padStart (2, "0") + b.padStart (2, "0");
}
$ (işlev () {
$ ("# girdi"). on ("değiştir", işlev () {
var input = $ (bu) .val ();
var color = parseColor (input);
var $ hücreler = $ ("# sonuç tbody td");
$ cell.eq (0) .attr ("bgcolor", girdi);
$ cell.eq (1) .attr ("bgcolor", renk);
vardeğer:
https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value.
Renk dizgilerini ayrıştırmak için kullanılan Netscape Classic kodu açık kaynak kodludur:
https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155.
Örneğin, her karakterin bir onaltılık basamak olarak ayrıştırıldığına ve ardından taşma kontrolü yapılmadan 32 bitlik bir tam sayıya kaydırıldığına dikkat edin. 32 bitlik bir tam sayıya yalnızca sekiz onaltılık rakam sığar, bu nedenle yalnızca son 8 karakter dikkate alınır. Onaltılık rakamları 32-bit tam sayılara ayrıştırdıktan sonra, 8-bit'e sığıncaya kadar 16'ya bölerek 8-bitlik tam sayılara kesilirler, bu yüzden baştaki sıfırlar yok sayılır.
Güncelleme: Bu kod, spesifikasyonda tanımlananla tam olarak eşleşmez, ancak tek fark birkaç satır koddur. Sanırım eklenen şu satırlar (Netscape 4'te):
eğer (bytes_per_val> 4)
{
bytes_per_val = 4;
}
|
Cevap:
Tarayıcı, chucknorris'i onaltılık bir değere dönüştürmeye çalışacaktır.
C, chucknorris'deki tek geçerli onaltılık karakter olduğundan, değer şu şekle dönüşür: c00c00000000 (geçersiz olan tüm değerler için 0).
Tarayıcı daha sonra sonucu 3 gruba ayırır: Kırmızı = c00c, Yeşil = 0000, Mavi = 0000.
Html arka planları için geçerli onaltılık değerler her renk türü (r, g, b) için yalnızca 2 basamak içerdiğinden, her gruptan son 2 basamak kesilerek tuğla kırmızımsı tonlu bir renk olan c00000 rgb değeri bırakılır.
|
chucknorris c ile başlar ve tarayıcı bunu onaltılık bir değere okur.
Çünkü A, B, C, D, E ve F onaltılık karakterlerdir.
Tarayıcı, chucknorris'i onaltılık C00C00000000 değerine dönüştürür.
Ardından C00C00000000 onaltılık değer RGB formatına dönüştürülür (3'e bölünür):
C00C00000000 ⇒ R: C00C, G: 0000, B: 0000
Tarayıcının rengi belirtmek için yalnızca iki rakama ihtiyacı vardır:
R: C00C, G: 0000, B: 0000 ⇒ R: C0, G: 00, B: 00 ⇒ C00000
Son olarak, web tarayıcısında bgcolor = C00000 değerini gösterin.
İşte bunu gösteren bir örnek:
| chucknorris |
c00c00000000 |
c00000 |
|
Eski özniteliklerdeki renkleri ayrıştırma kuralları, mevcut yanıtlarda belirtilenlerden daha ek adımlar içerir. Kesik bileşen 2 basamaklı kısım şu şekilde tanımlanır:
Son 8 hariç tüm karakterleri atın
Tüm bileşenlerin başında sıfır olduğu sürece baştaki sıfırları tek tek atın
İlk 2 dışındaki tüm karakterleri atın
Bazı örnekler:
oooFoooFoooF
000F 000F 000F <- değiştir, tampon ve yığın
0F 0F 0F <- baştaki sıfırlar kesildi
0F 0F 0F <- sağdan 2 karaktere kesildi
oooFooFFoFFF
000F 00FF 0FFF <- değiştir, tampon ve yığın
00F 0FF FFF <- baştaki sıfırlar kesildi
00 0F FF <- sağdan 2 karaktere kesildi
ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- değiştirme, tamponlama ve yığın
BC000000 BC000000 BC000000 <- soldan 8 karaktere kesildi
BC BC BC <- sağdan 2 karaktere kısaltıldı
AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- değiştir, tampon ve yığın
0C000000 0C000000 0C000000 <- soldan 8 karaktere kesildi
C000000 C000000 C000000 <- baştaki sıfırlar kesilmiş
C0 C0 C0 <- sağdan 2 karaktere kesildi
Aşağıda, algoritmanın kısmi bir uygulaması bulunmaktadır. Kullanıcının geçerli bir renk girdiği hataları veya durumları işlemez.
function parseColor (input) {
// yapılacaklar listesi: girdi "" ise hata döndür
input = input.trim ();
// yapılacaklar listesi: girdi "şeffaf" ise hata döndür
// todo: girdi adlandırılmış bir renkse karşılık gelen #rrggbb döndür
// yapılacaklar listesi: girdi #rgb ile eşleşirse #rrggbb döndür
// yapılacaklar listesi: U + FFFF'den büyük unicode kod noktalarını 00 ile değiştirin
eğer (input.length> 128) {
input = input.slice (0, 128);
}
eğer (input.charAt (0) === "#") {
input = input.slice (1);
}
input = input.replace (/ [^ 0-9A-Fa-f] / g, "0");
while (input.length === 0 || input.length% 3> 0) {
giriş + = "0";
}
var r = input.slice (0, input.length / 3);
var g = input.slice (input.length / 3, input.length * 2/3);
var b = input.slice (input.length * 2/3);
eğer (r.length> 8) {
r = r.slice (-8);
g = g.slice (-8);
b = b. dilim (-8);
}
while (r.length> 2 && r.charAt (0) === "0" && g.charAt (0) === "0" && b.charAt (0) === "0") {
r = r.slice (1);
g = g.slice (1);
b = b. dilim (1);
}
eğer (r.length> 2) {
r = r.slice (0, 2);
g = g.slice (0, 2);
b = b. dilim (0, 2);
}
return "#" + r.padStart (2, "0") + g.padStart (2, "0") + b.padStart (2, "0");
}
$ (işlev () {
$ ("# girdi"). on ("değiştir", işlev () {
var input = $ (bu) .val ();
var color = parseColor (input);
var $ hücreler = $ ("# sonuç tbody td");
$ cell.eq (0) .attr ("bgcolor", girdi);
$ cell.eq (1) .attr ("bgcolor", renk);
var